* {
    box-sizing: border-box;
}

body {
    overflow: hidden;
    margin: 0;
    text-align: center;
}

/* 提示 */
h3 {
    margin-bottom: 0;
    text-align: center;
}

/* 点击次数 */
small {
    display: block;
    margin-bottom: 20px;
    text-align: center;
}

.fa-heart {
    color: red;
}

/* 图片 */
.loveMe {
    position: relative;
    overflow: hidden;
    margin: auto;
    width: 600px;
    height: 340px;
    max-width: 100%;
    background: url('https://image4.cnpp.cn/upload/images/20190309/13341037606_1200x675.jpg') no-repeat center center/cover;
    box-shadow: 0 15px 30px rgba(0, 0, 0, .25), 0 10px 20px rgba(0, 0, 0, .22);
    cursor: pointer;
}

/* 点击出来的爱心 */
.loveMe .fa-heart {
    position: absolute;
    /* 为了点击时爱心出现在指针正中间,并放大 */
    transform: translate(-50%, -50%) scale(0);
    animation: grow .6s linear;
}

@keyframes grow {
    to {
        transform: translate(-50%, -50%) scale(10);
        opacity: 0;
    }
}